const os = require('os')
const path = require('path')
const ESLintPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')
const threads = os.cpus().length
// webpack本身只能处理js或者json,其他资源需要loader才能解析
// 5大核心,entry,output,loader,plugins,mode
const getStyleLoader = (loader = '') => {
    return [
        MiniCssExtractPlugin.loader, //提取css为单独文件
        'css-loader', //把css编译为commonjs的模块到js中
        // 具体配置postcss-loader解决css在不同浏览器的兼容性问题
        {
            loader: 'postcss-loader',
            options: {
                postcssOptions: {
                    plugins: [
                        'postcss-preset-env',
                    ],
                },
            },
        },
        loader,
    ]
}
module.exports = {
    // 只能相对路径
    entry: './src/main.js',
    output: {
        // 只能绝对路径,这个是所有文件的输出路径,这个是dev的就不用配置文件输出了
        path: path.resolve(__dirname, '../dist'),
        // 入口文件打包输出文件名
        filename: 'static/js/main.js',
        // 打包时先情空path
        clean: true,
    },
    // loader
    module: {
        rules: [
            {
                oneOf: [
                    // 各种loader配置
                    {
                        // 处理css文件
                        test: /\.css$/,
                        use: getStyleLoader(),
                    },
                    {
                        test: /\.less$/,
                        use: getStyleLoader('less-loader')
                    },
                    {
                        test: /\.s[ac]ss$/,
                        use: getStyleLoader('sass-loader')
                    },
                    {
                        // 处理图片资源
                        test: /\.(png|jpe?g|gif|bmp|webp|svg)$/,
                        type: 'asset',
                        parser: {
                            // 转为base64的情况
                            dataUrlCondition: {
                                maxSize: 100 * 1024 //100kb
                            }
                        },
                        generator: {
                            //输出图片名称,hash文件名,ext扩展名,query参数
                            filename: 'static/images/[hash:10][ext][query]'
                        }
                    },
                    {
                        // 加resource表示不会被处理成base64
                        test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
                        type: 'asset/resource',
                        generator: {
                            //输出图片名称,hash文件名,ext扩展名,query参数
                            filename: 'static/media/[hash:10][ext][query]'
                        }
                    },
                    {
                        // babel用来解决js中兼容性问题
                        test: /\.js$/,
                        exclude: /node_modules/,
                        use: [
                            {
                                loader: 'thread-loader', //开启多进程
                                options: {
                                    workers: threads,
                                },
                            },
                            {
                                loader: 'babel-loader',
                                options: {
                                    // 可以单独写成.babelrc.js
                                    // presets:['@babel/preset-env']
                                    // 缓存文件会在node_module下的cache找到
                                    cacheDirectory: true, //开启babel缓存
                                    cacheCompression: false, //关闭缓存文件压缩
                                },
                            },
                        ]
                    }
                ]
            }
        ]
    },
    plugins: [
        // 插件需要require引用
        new ESLintPlugin({
            // 检查的文件夹
            context: path.resolve(__dirname, '../src'),
            cache: true, //默认开启的
            cacheLocation: path.resolve(__dirname, '../node_modules/.cache/eslintcache'),
            threads
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../public/index.html')
        }),
        // css单文件插件
        new MiniCssExtractPlugin({
            filename: 'static/css/main.css'
        }),
        // css压缩,html和js开启production后自动压缩为一行
        new CssMinimizerPlugin(),
        // 压缩js代码的,其实production自动就会引入这个插件
        new TerserWebpackPlugin({
            parallel:threads
        })
    ],
    mode: 'production',
    // 生成行和列都有的source-map
    devtool: 'source-map'
}